<template>
  <div class="select-none">
    <img :src="bg" class="login-bg" alt=""/>
    <div class="login-container">
      <div class="img">
        <img :src="illustration" alt="" key="6">
      </div>
      <div class="login-box">
        <div class="login-form">
          <transition-group
              appear
              name="animate__animated animate__bounce"
              enter-active-class="animate__flipInX"
          >
            <img key="1" :src="logo" class="logo" alt="">
            <h2 key="2" class="outline-none">图书馆编目系统</h2>
            <el-form
                ref="ruleFormRef"
                size="large"
                :model="ruleForm"
                :rules="rules"
                status-icon
                class="demo-ruleForm"
                key="3"
            >
              <el-form-item prop="user">
                <el-input v-model="ruleForm.user" placeholder="账号" autocomplete="off"/>
              </el-form-item>
              <el-form-item prop="pass">
                <el-input v-model="ruleForm.pass" type="password" placeholder="密码" autocomplete="new-password"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="width: 100%"
                           size="default" @click="handleSubmit(ruleFormRef)">提交
                </el-button>
              </el-form-item>
            </el-form>
          </transition-group>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {reactive, ref} from 'vue'
import {useRouter} from "vue-router";
import {post} from "@/utils/request";
import {ElMessage} from 'element-plus';
import {bg, logo, illustration} from "./utils/static";

const router = useRouter();
const ruleFormRef = ref('')

// 检查用户是否已登录 ，登录跳转对应路由
const userType = JSON.parse(sessionStorage.getItem('userInfo'))?.userType
if (userType === 0) {
  router.push("/admin")
} else {
  router.push("/user")
}

const ruleForm = reactive({
  user: '',
  pass: '',
})

const rules = reactive({
  user: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
  ],
  pass: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
})

const errMessage = (message) => {
  ElMessage.error({message})
}

const getLogin = async () => {
  try {
    // 请求接口
    const result = await post('/login', {
      name: ruleForm.user,
      password: ruleForm.pass
    })
    // 说明接口以通过
    sessionStorage.setItem("userInfo", JSON.stringify(result));
    if (result.userType === 0) {
      await router.push('/admin')
    } else if (result.userType === 1) {
      await router.push('/user')
    }
  } catch (err) {
    errMessage('用户名和密码有误，请重新登录！')
    //路由跳转:跳转到重新登录页面
    await router.push('/login')
  }
}

const handleSubmit = async (formEl) => {
  if (!ruleForm) return false
  await formEl.validate(async (valid) => {
    if (valid) {
      await getLogin()
    }
  });
}

</script>

<style scoped>
.logo {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto;
}

.outline-none {
  font-size: 24px;
  margin: 15px 0;
  color: #999;
  text-align: center;
}

.login-bg {
  position: fixed;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: -1;
}

.login-container {
  width: 70%;
  height: 380px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.login-box {
}

.login-container .img {
  position: absolute;
  top: 0;
}

.login-form {
  width: 360px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}


</style>
